<template>
  <div class="login">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>通用后台管理</span>
      </div>
      <el-form label-width="80px" :model="form" ref="form" :rules="rules">
        <!--        <el-form-item label="用户名" prop="username" :rules="[
                    {required: true, message: '请输入用户名', trigger: 'blur'},
                    {min: 4, max: 10,  message: '长度要求4-10', trigger: 'blur'}
                ]"> -->
        <el-form-item label="用户名" prop="username">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <!--        简单验证-->
        <!--        <el-form-item label="密码" prop="password" :rules="[
                    {required: true, message: '请输入密码', trigger: 'blur'},
                    {min: 6, max: 12,  message: '长度要求6-12', trigger: 'blur'}
                ]">  -->
        <el-form-item label="密码" prop="password">
          <el-input type="password" v-model="form.password"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="login('form')">登录</el-button>
        </el-form-item>
      </el-form>

    </el-card>
  </div>
</template>
<script>
/*工具封装验证*/
import {setToken, validateName, validatePass} from '@/utils/validate'
import {login} from "@/router/svc/user"

export default {
  data() {
    /*一般验证*/
    /*const validateName = (rule, value, callback) => {
      let reg = /(^[a-zA-Z0-9]{4,10}$)/;
      if (value === '') {
        callback(new Error('请输入用户名'));
      } else if (!reg.test(value)) {
        callback(new Error('用户名长度要求4-10'));
      } else {
        callback();
      }
    }
    const validatePass = (rule, value, callback) => {
      let pass = /^(?=.*\d)(?=.*[a-zA-Z])(?=.*[^\da-zA-Z\s]).{6,12}$/
      if (value === '') {
        callback(new Error('请输入密码'))
      } else if (!pass.test(value)) {
        callback(new Error('要求6-12位密码, 至少包含字母、数字、特殊字符，1-9位'))
      } else {
        callback()
      }
    }*/
    return {
      form: {
        username: '',
        password: '',
      },
      rules: {
        username: [{validator: validateName, trigger: 'blur'}],
        password: [{validator: validatePass, trigger: 'blur'}],
      }
    }
  },
  methods: {
    login(form) {
      this.$refs[form].validate(valid => {
        if (valid) {
          console.log(this.form)
          // axios-4
          /*this.service.post('/userLogin', this.form)
              .then(res => {
                console.log(res.data)
                if (res.data.code === 200) {
                  setToken('username', this.form.username)
                  setToken('token', res.data.data)
                  this.$router.push('/home')
                }
              })
              .catch(err => {
                console.error(err)
              })*/
          login(this.form).then(res => {
            console.log(res.data)
            if (res.data.code === 200) {
              setToken('username', this.form.username)
              setToken('token', res.data.data)
              this.$router.push('/home')
            }
          }).catch(err => {
            console.error(err)
          })

        } else {
          console.error(this.form)
        }
      })
    }
  }
}
</script>
<style lang="scss">
.login {
  width: 100%;
  height: 100%;
  position: absolute;
  background: #409EFF;

  .box-card {
    width: 450px;
    margin: 200px auto;

    .el-card__header {
      font-size: 32px;
    }

    .el-button {
      width: 100%;
    }
  }
}
</style>